<template>
    <div>
        <page-header title="工业机器人3D全结构刚柔耦合交互特性视觉" style="color: #00c2b3;" />
        <div class="basic">
            <div class="header">
                <div class="title">
                    <span>项目信息</span>
                </div>
            </div>
            <div class="content">
                <div class="one">
                    <div class="first">
                        <span class="name">负责人：</span>
                        <span class="con">张三</span>
                    </div>
                    <el-divider class="ver" direction="vertical" />
                    <div class="first">
                        <span class="name">项目开始时间：</span>
                        <span class="con">2020年11月30日</span>
                    </div>
                    <el-divider class="ver" direction="vertical" />
                    <div class="first">
                        <span class="name">项目结束时间：</span>
                        <span class="con">2021年11月30日</span>
                    </div>
                </div>
                <div class="one">
                    <div class="first">
                        <span class="name">申请资金：</span>
                        <span class="con">200000元</span>
                    </div>
                    <el-divider class="ver" direction="vertical" />
                    <div class="first">
                        <span class="name">项目类型：</span>
                        <span class="con">外部项目</span>
                    </div>
                    <el-divider class="ver" direction="vertical" />
                    <div class="first">
                        <span class="name">申请部门：</span>
                        <span class="con">重庆科技学院</span>
                    </div>
                </div>
                <div class="desc">
                    <span class="name">项目描述：</span>
                    <span class="con">根据XX公司的需求，按期完成所有交付</span>
                </div>
                <span class="divider" />
                <div class="statue">
                    <span class="name">当前状态：<el-tag v-for="item in items" :key="item.label" :type="item.type" effect="dark" size="small">{{ item.label }}</el-tag></span>
                </div>
            </div>
        </div>
        <div class="upload">
            <page-main title="上传附件">
                <file-upload :files="files" action="http://scrm.1daas.com/api/upload/upload" name="image" :data="{'token':'TKD628431923530324'}" @on-success="handleSuccess3" />
            </page-main>
        </div>
        <div>
            <page-main style="padding-left: 20px;" title="项目进度">
                <ul class="nav">
                    <li class="complete">
                        <a class="nav-link" href="#">
                            <i class="label">1</i>
                            <h5 class="mt-1">填写申请并提交</h5>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="label">2</i>
                            <h5 class="mt-1">项目管理处确认</h5>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="label">3</i>
                            <h5 class="mt-1">处室审核</h5>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="label">4</i>
                            <h5 class="mt-1">专家申报</h5>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="label">5</i>
                            <h5 class="mt-1">科研处申报</h5>
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                            <i class="label">6</i>
                            <h5 class="mt-1">立项</h5>
                        </a>
                    </li>
                </ul>
            </page-main>
        </div>
    </div>
</template>

<script>
import PageMain from '@/components/PageMain'
export default {
    components: {PageMain},
    data() {
        return {
            image: '',
            files: [
                {
                    name: '测试文件.zip',
                    url: 'http://images.lookbi.com/uploads/apply/96/d8521fc691e472eec91a170201866e7d.zip'
                }
            ],
            items: [
                {type: 'success', label: '进行中'}
            ]
        }
    },
    methods: {
        handleSuccess3(res, file) {
            this.files.push({
                name: file.name,
                url: res.error === '' ? res.data.path : ''
            })
            this.$nextTick(() => {
                if (res.error !== '') {
                    this.$message.warning(res.error)
                    this.files.pop()
                }
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.basic {
    margin: 20px;
    background: #fff;
}
.header {
    padding-top: 15px;
    padding-bottom: 15px;
}
.first {
    display: flex;
    margin-left: 40px;
    margin-bottom: 25px;
    align-items: center;
}
.one {
    display: flex !important;
}
.ver {
    margin: 0 20px 20px 20px;
    height: 35px;
}
.name {
    min-width: 62px;
    color: #888;
    overflow: hidden;
    white-space: nowrap;
    font-size: 14px;
}
.desc {
    display: flex;
    margin-left: 20px;
    margin-bottom: 25px;
}
.divider {
    display: block;
    border-bottom: solid 1px #f3f3f3;
}
.title {
    margin-left: 20px;
}
.statue {
    margin-left: 20px;
    padding-bottom: 15px;
    margin-top: 15px;
}
.progress {
    margin: 20px;
    background: #fff;
}
.con {
    font-size: 14px;
}
.nav {
    text-align: center !important;
    list-style: none;
    display: block;
    padding-left: 0;
    margin: 50px 0 0 0;
}
.complete {
    display: inline-block;
    border-top: 0.5rem solid #2196f3;
}
.nav-item {
    margin-left: 3px;
    border-top: 0.5rem solid #eee;
    display: inline-block;
}
.nav-link {
    color: #2196f3;
    padding: 12px 15px;
    margin-top: -1.85rem;
    display: inline-block;
    text-decoration: none;
}
.label {
    background-color: #2196f3;
    color: #fff;
    display: inline-block;
    width: 1.75rem;
    height: 1.75rem;
    line-height: 1.75rem;
    text-align: center;
    border-radius: 50%;
    font-size: 14px;
    font-weight: bold;
}
i {
    font-style: normal;
}
.mt-1 {
    margin-top: 0.5rem !important;
    font-size: 16px;
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.1;
}
</style>
